<template>
<!--电桩分布-->
<view class="community">
	<view class="head_bg"></view>
	<view class="big_box" style="margin-top:-180rpx;">
		<view class="count_tab">
			<view :class="{count_tab_inner: istrue == true,is_active: tabIndex == 1}" @tap="tabSelect" :data-id="1" style="margin-left: 100rpx;">电桩分布</view>
			<view :class="{count_tab_inner: istrue == true,is_active: tabIndex == 3}" @tap="tabSelect" :data-id="3" style="margin-right: 100rpx;">地图展示</view>
		</view>
		<view class="padding-top-sm" v-if="tabIndex == 1">
			<view class="operating_box" v-for="(item,index) in list" :key="index">
				<view class="flex padding-sm margin-bottom-sm">
					<view class="flex-treble">
						<view class="item_name">{{item.residential_quarters_name}}</view>
						<view class="community_msg_line" style="margin-top: 5rpx;">
							<image class="community_msg_icon" src="../../../common/img/dizhi_hui.png" mode=""></image>
							<text class="community_msg_text" style="color: grey;">{{item.residential_quarters_address}}</text>
						</view>
					</view>
					<view class="flex-sub">
						<view>
							<arprogress activeColor="#00AFEA" :percent="item.utilization"><text>{{item.utilization}}%</text></arprogress>
						</view>
					</view>
					
				</view>
			</view>
			<view v-if="list.length==0" class="margin-top-lg text-center">
				<image src='../../../common/img/no_data.png' style="width:275rpx;height:312rpx;"></image>
			</view>
		</view>
		<view class="padding-top-sm" v-if="tabIndex == 2">
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
					</map>
				</view>
			</view>
		</view>
		<!-- <view v-if="list.length>0" class="text-black text-df text-center bg-white padding-sm padding-left-lg be-gray">
			{{loadingTxt}} 共({{list.length}}条记录)
		</view> -->
	</view>
</view>
</template>

<script>
	import {getLocation,KEY} from '@/utils/location.js'
	var util = require('@/utils/util.js');
	var formatLocation = util.formatLocation;
	import arprogress from '@/components/ar-circle-progress/index.vue'
	let page=1,timer=null
	export default {//D8E9F4
		components:{
			arprogress
		},
		data() {
			return {
				info:'',
				list:[],
				tabIndex: 1,
				istrue: true,
				loadingTxt:'加载更多',
				jd:"",
				wd:"",
				percent1:5,
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		onShow() {
			page=1;
			this.getLocationLocal();
			// this.gatlist();
		},
		methods: {
			tabSelect(e) {
				this.tabIndex = e.currentTarget.dataset.id;
			},
			getLocationLocal() {
				uni.showLoading({
					title: '定位中'
				})
				getLocation().then(res => {
					console.log(JSON.stringify(res))
					this.jd=res.latitude;
					this.wd=res.longitude;
					this.gatlist()
				}).catch(res => {
					console.log("获取是白")
					uni.hideLoading()
				});
			},
			gatlist(){
				let that=this;
				that.http.tokenreq({
					url:"user/v1/fujin",
					// data:{"Latitude":this.jd,"Longitude":this.wd}
					data:{"Latitude":"39.985292","Longitude":"116.499059"}
				}).then((res) => {
					let e=res.data;
					if(e.code==0 && e.success){
						let list=e.rows;
						list.forEach(item => {
							this.covers.push({	//往里面添加循环数据
								id: item.Longitude,
								latitude: item.Latitude,
								longitude: item.Longitude,
								iconPath: "../../../common/img/dizhi_hui.png",
								width: 40,
								height: 45,
								callout: {
									content: item.residential_quarters_name,
									textAlign: 'center',
									borderRadius: 4,
									padding: 4,
									display: 'ALWAYS'
								}
							})
						});
						that.list=list;
						page++;
					}else{
						uni.showModal({
							content:e.message,
							showCancel:false,
						})
					}
				})
			},
			getmorelist(){
				this.loadingTxt='加载中'
				let that=this;
				that.http.tokenreq({
					url:"user/v1/fujin",
					data:{"Latitude":this.jd,"Longitude":this.wd}
				}).then((res) => {
					let e=res.data;
					if(e.code==0 && e.success){
						if(e.rows.length==0){
							that.loadingTxt="已经加载全部";
							return;
						}
						that.list=that.list.concat(e.rows);
						page++;
					}else{
						uni.showModal({
							content:e.message,
							showCancel:false,
						})
					}
				})
			},
			onReachBottom() {
				//阻止重复加载
				if(timer !== null){
					clearTimeout(timer)
				}
				timer=setTimeout(()=>this.getmorelist(),500)
			},
		}
	}
</script>
<style>
	.ele_title_inner{
		color: #FFFFFF;
		font-size:36rpx;
	}
	.operating_box{
		width: 95%;
		margin-top: 10rpx;
		padding-bottom: 0;
		border-radius: 20rpx;
	}
	.solid::after {
	    border: none;
	}
	.ele_title_inner{
		color: #FFFFFF;
		font-size:36rpx;
	}
	.item_name{
		font-size: 30rpx;
	}
</style>